<template>
  <div class="app-container flex-column">
    <div>
      <div class="flex-between mt10 ">
        <div class="flex">
          <div class="flex">
            <span class="ml10 ">归属部门：</span>
            <treeselect v-model="queryParams.dept_id" :options="deptOptions" :show-count="true" :normalizer="normalizer"
              style="width:150px;" placeholder="请选择归属部门" />
          </div>
          <span class="ml10 ">用户：</span>
          <el-input v-model="queryParams.nick_name" style="width:120px;"></el-input>
          <el-button class="ml10" type="primary" @click="cxtj">查询</el-button>
        </div>
        <div>
          <el-button type="primary" @click="newUser">新增</el-button>

        </div>
      </div>
    </div>

    <div class="mt10" style="flex: 1;overflow: auto;">
      <el-table :data="userList" border stripe @row-click="getrow" height="100%" :row-class-name="tableRowClassName"
        highlight-current-row>
        <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
          <template scope="scope">
            <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="归属部门" prop="dept_name" width="100" header-align="center" show-overflow-tooltip />
        <el-table-column label="用户名称" prop="user_name" width="100" header-align="center" show-overflow-tooltip />
        <el-table-column label="用户昵称" prop="nick_name" width="100" header-align="center" show-overflow-tooltip />
        <el-table-column label="性别" width="60" header-align="center" prop="sex" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
          </template>
        </el-table-column>
        <el-table-column label="手机号码" width="120" header-align="center" prop="phonenumber" show-overflow-tooltip />
        <el-table-column label="岗位" width="100" header-align="center" prop="post_name" show-overflow-tooltip />
        <el-table-column label="角色" min-width="100" header-align="center" prop="role_name" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status" width="70">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-value="0" inactive-value="1"
              @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="create_time" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" header-align="center" align="center">
          <template scope="scope">
            <el-link type="primary" @click="EditUser(scope.row )">修改</el-link>
            <el-link type="primary" class="ml10" @click="handleDelete(scope.row )">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mb20">
      <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
        @pagination="getpagelist" />
    </div>
    <edit :dialogedit.sync="dialogedit" :user_id="user_id" @reload="getList" />
  </div>
</template>

<script>
  import {
    listDept
  } from '@/api/system/dept';
  import {
    listUser,
    delUser,
    changeUserStatus
  } from '@/api/system/user';
  import '@/assets/styles/tree.scss'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import edit from './edit';
  export default {
    name: "User",
    components: {
      edit,
      Treeselect
    },
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    data() {
      return {
        cheight: 100,
        total: 0,
        currentpage: 1,
        pagesize: 100,
        // 岗位表格数据
        deptOptions: [],
        dept_name: '',
        userList: [],
        tableheight: 400,
        defaultProps: {
          children: "children",
          label: "dept_name"
        },
        // 查询参数
        queryParams: {
          dept_id: null,
          nick_name: ""
        },
        getindex: -1,
        user_id: '',
        dialogedit: false
      };
    },
    created() {
      this.getDept();
      this.getList();
    },
    mounted() {

    },
    watch: {
      // 根据名称筛选部门树
      dept_name(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      cxtj() {
        this.currentpage = 1;
        this.getList();
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.dept_id,
          label: node.dept_name,
          children: node.children
        };
      },
      // 筛选节点
      filterNode(value, data) {

        if (!value) return true;
        return data.dept_name.indexOf(value) !== -1;
      },
      // 部门
      handleNodeClick(data) {
        this.queryParams.dept_id = data.dept_id;
        this.currentpage = 1;
        this.getList();
      },
      // 角色状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$modal.confirm('确认要"' + text + '""' + row.nick_name + '"用户吗？').then(function() {
          var Params = {
            user_id: row.user_id,
            status: row.status,
          }
          return changeUserStatus(Params);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
      },
      filterdept() {

      },
      /** 获取部门列表 */
      getDept() {
        listDept().then(response => {
          this.deptOptions = this.handleTree(response.rows, "dept_id", "parent_id");

          // this.$nextTick(() => {
          //   if (this.deptOptions.length > 0) {
          //     this.$refs.tree.setCurrentKey(this.deptOptions[0].dept_id)
          //     this.handleNodeClick(this.deptOptions[0]);
          //   }
          // });

        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const nick_name = row.nick_name;
        var Params = {
          user_id: row.user_id
        }
        this.$modal
          .confirm(`是否确认删除?用户昵称:${nick_name}？`)
          .then(function() {
            return delUser(Params);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess('删除成功');
          })
          .catch(() => {});

      },
      /** 修改用户列表 */
      EditUser(row) {
         this.user_id = row.user_id;
        this.dialogedit = true;
      },
      /** 新增用户列表 */
      newUser() {
        this.user_id = '';
        this.dialogedit = true;
      },
      /** 查询岗位列表 */
      getList() {
        this.getindex = -1;
        var params = {
          page: this.currentpage,
          pagesize: this.pagesize
        }
        params = this.ObjParams(this.queryParams, params);
        listUser(params).then(response => {
          this.userList = response.rows;
          this.total = parseInt(response.total);
        });
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      },
      settableheiht() {
        var clientHeight = document.body.clientHeight;
        this.cheight = clientHeight - 84;
      }
    }
  };
</script>
<style scoped lang="scss">

</style>
